<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    
        .ul1>li{
width: 200px;
height: 30px;

        }
        .ul1{
            margin: 0 auto;
        }
    </style>

</head>

<body>
<!-- 
    <button class="btn">按钮</button>
    <div class="box" style="width:100px;"></div> -->
    <ul class="ul1"></ul>
    <script>

/* var btn = document.querySelector(".btn");
var box1 = document.querySelector(".box");

btn.onclick =function fn(){
    var flag =true;
flag=!flag;
console.log(flag)

if(flag==true){
box1.style.display="none";
}else{
    box1.style.display="block";
}
}
console.log(box1.style.width) */
var ul1 = document.querySelector(".ul1");
var arr = [{name:"张三",age:21},{name:"李四",age:20},{name:"王五",age:26}]
var str ='';
arr.forEach(function(item){
   
    str +=`
<li> ${item.name}是${item.age}</li>

`


}

)
ul1.innerHTML=str

    </script>
</body>
</html>